<script setup lang="ts">
import {
  Container,
  ContainerStatus,
  Pod
} from "@/views/domain/kubeHud/api/k8s/types";
import KContainer from "../../components/KContainer.vue";
import { onMounted, ref, watch } from "vue";
import {
  IconContainer,
  IconTerminal
} from "@/views/domain/kubeHud/views/k8s/components/icons";
import { getContainerStatus, timeTrans } from "@/views/domain/kubeHud/utils";
import KSpace from "../../components/KSpace.vue";
import PodTerminalDialog from "./PodTerminalDialog.vue";
import PodLogDialog from "./PodLogDialog.vue";

type Prop = {
  pod?: Pod;
};
const props = defineProps<Prop>();

type ContainerRow = {
  container?: Container;
  status?: ContainerStatus;
};

const containerRows = ref<ContainerRow[]>();
const resetRows = (pod?: Pod) => {
  if (!pod) {
    containerRows.value = [];
    return;
  }

  containerRows.value = pod.spec.containers.map(container => ({
    container,
    status: pod.status.containerStatuses.find(
      status => status.name === container.name
    )
  }));
};

const containerPortsDesc = (c: Container): string => {
  return c.ports
    ?.map(port => `${port.containerPort}/${port.protocol}`)
    .join(", ");
};

onMounted(() => {
  resetRows(props.pod);
});

watch(
  () => props.pod,
  pod => {
    resetRows(pod);
  }
);
</script>

<template>
  <KContainer class="flex-col container-list-wrapper" :padding="0" fill>
    <el-table :data="containerRows" table-layout="auto">
      <el-table-column width="64px">
        <template #default="{ row }">
          <div class="container-badge">
            <el-icon size="32">
              <IconContainer />
            </el-icon>
            <div
              :class="[
                'badge',
                row.status?.state?.running ? 'ready' : 'not-ready'
              ]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <div class="flex flex-col">
            <div class="flex">
              <span class="cell-content">{{ row.container?.name }}</span>

              <div class="w-1" />
              <el-tooltip content="日志" placement="top">
                <PodLogDialog
                  icon="Document"
                  :namespace="pod?.metadata?.namespace"
                  :pod-name="pod?.metadata?.name"
                  :container-name="row.container?.name"
                  link
                />
              </el-tooltip>
              <div class="w-1" />
              <el-tooltip content="终端" placement="top">
                <PodTerminalDialog
                  :icon="IconTerminal"
                  :namespace="pod?.metadata?.namespace"
                  :pod-name="pod?.metadata?.name"
                  :container-name="row.container?.name"
                  link
                />
                <el-button link :icon="IconTerminal" />
              </el-tooltip>
            </div>
            <el-tooltip
              :content="`镜像: ${row.container?.image}`"
              placement="top-start"
            >
              <el-text truncated style="align-self: auto" size="small">
                镜像: {{ row.container?.image }}
              </el-text>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="{ row }">
          <KSpace direction="column">
            <span class="cell-content">{{
              getContainerStatus(row.status)
            }}</span>
            <span class="cell-title">状态</span>
          </KSpace>
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="{ row }">
          <KSpace direction="column">
            <span class="cell-content">{{ row.status?.restartCount }}</span>
            <span class="cell-title">重启次数</span>
          </KSpace>
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="{ row }">
          <KSpace direction="column">
            <span class="cell-content">
              {{ containerPortsDesc(row.container) }}
            </span>
            <span class="cell-title"> 端口 </span>
          </KSpace>
        </template>
      </el-table-column>
    </el-table>
  </KContainer>
</template>
<style lang="scss" scoped>
.container-list-wrapper {
  .el-table {
    :deep(.el-table__body-header) {
      display: none;
    }
  }
}

.container-badge {
  display: flex;
  position: relative;

  .badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .ready {
    background-color: var(--el-color-success);
  }

  .not-ready {
    background-color: var(--el-color-danger);
    animation: blink-and-change-color 2s infinite ease-in-out;
  }

  @keyframes blink-and-change-color {
    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
      opacity: 1;
      background-color: var(--el-color-danger);
    }
    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
      opacity: 0.5;
      background-color: var(--el-color-danger);
    }
    /* 动画结束时的状态，文字完全显示，颜色为红色 */
    100% {
      opacity: 1;
      background-color: var(--el-color-danger);
    }
  }
}

.cell-content {
  font-size: 14px;
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.cell-title {
  font-size: 12px;
}
</style>
